<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/commom.js"></script>
    
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/博客系统logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <img src="img/搜索 (1).png" id="icon" onclick="searchArtList()">
        <input type="search" id="search" placeholder="通过文章标题或文章作者搜索">
        <a href="blog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="login.html">登陆</a>
        <a href="myblog_list.html">我的</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="container">
        <div class="container-right" id="artDiv" style="width: 100%;">
            <!-- 每一篇博客包含标题, 摘要, 时间 -->
            <div class="blog">
                <div class="title"></div>
                <div class="date"></div>
                <div class="desc">
                    
                </div>
                
            </div>
        </div>
    </div>

    <script>
        function searchArt() {
            var search = getUrlValue("search");
            // Urldecode 解码
            search = decodeURI(search);
            // alert(search);
            jQuery.ajax({
                url: "/art/search",
                type: "POST",
                data: {"search": search},
                success: function(result) {
                    if (result != null && result.code === 200) {
                        // 查询成功, 有两种情况: 1. 收藏过文章. 2. 从未收藏过文章.
                        if (result.data != null && result.data.length > 0) {
                            // 查询结果不为空
                            var artListHtml = "";
                            for (var i = 0; i < result.data.length; i++) {
                                // 循环文章集合拿到每一篇文章
                                var articleinfo = result.data[i];
                                // 开始拼接
                                artListHtml += '<div class="blog">';
                                artListHtml += '<div class="title">'+articleinfo.title+'</div>';
                                artListHtml += '<div class="date">'+articleinfo.updatetime+'</div>';
                                artListHtml += '<div class="desc">'+articleinfo.content+'</div>';
                                artListHtml += '<a href="blog_content.html?id='+ articleinfo.id
                                                +'" class="detail">查看全文 &gt;&gt;</a>';
                                artListHtml += '</div>';
                            }
                            jQuery("#artDiv").html(artListHtml);
                        } else {
                            // 查询的文章不存在
                            jQuery("#artDiv").html('<h3 style="text-align: center">未找到相关结果~</h3>');
                        } // 
                    } else {
                        // 查询失败
                        alert("页面加载失败!请重试!")
                    }
                }
            });
        }
        searchArt();

        function searchArtList() {
            var search = jQuery("#search");
            var searchVal = search.val();
            searchVal = decodeURI(searchVal);
             console.log(searchVal);
           //  alert(search.val())
            if (searchVal === "") {
                return;
            }
            jQuery.ajax({
                url: "/art/search",
                type: "POST",
                data: {"search": searchVal},
                success: function(result) {
                    if (result != null && result.code === 200) {
                        // 查询成功
                        if (result.data != null && result.data.length > 0) {
                            // 查询结果不为空
                            var artListHtml = "";
                            for (var i = 0; i < result.data.length; i++) {
                                // 循环文章集合拿到每一篇文章
                                var articleinfo = result.data[i];
                                // 开始拼接
                                artListHtml += '<div class="blog">';
                                artListHtml += '<div class="title">'+articleinfo.title+'</div>';
                                artListHtml += '<div class="date">'+articleinfo.updatetime+'</div>';
                                artListHtml += '<div class="desc">'+articleinfo.content+'</div>';
                                artListHtml += '<a href="blog_content.html?id='+ articleinfo.id
                                                +'" class="detail">查看全文 &gt;&gt;</a>';
                                artListHtml += '</div>';
                            }
                            jQuery("#artDiv").html(artListHtml);
                        } else {
                            // 查询的文章不存在
                            jQuery("#artDiv").html('<h3 style="text-align: center">未找到相关结果~</h3>');
                        } // 
                    } else {
                        // 查询失败
                        alert("页面加载失败!请重试!")
                    }
                    location.href = "search_list.html?search=" + searchVal;
                }
            });
        }
    </script>
</body>
</html>